<template>
  <div class="detail">
    <el-form ref="form" :model="queryParams" label-width="80px" labelPosition="left">
      <div class="flex justify-center align-center">
        <h2 style="margin: 5px 0px;">
          {{ title.split("").join(" ") }}
        </h2>
      </div>
      <el-divider style="margin: 10px 0px;;padding:0px;" />
      <el-row :gutter="10">
        <el-col :span="12">
          <el-form-item label="申购事由">
            <el-input v-model="queryParams.reason" placeholder="" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="单号">
            <el-input v-model="queryParams.formId" placeholder="" />
          </el-form-item>
        </el-col>
      </el-row>
      <!-- <el-divider style="margin: 0px 0px 10px 0px;;padding:0px;" /> -->
      <el-row :gutter="10">
        <el-col :span="8">
          <el-form-item label="所属部门">
            <el-input v-model="queryParams.department" placeholder="" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="申购人">
            <el-input v-model="queryParams.name" placeholder="" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="日期">
            <el-input v-model="queryParams.date" placeholder="" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-divider style="margin: 0px 0px 10px 0px;;padding:0px;" />
      <div class="flex flex-col  ">
        <el-table height="200px" title="处方列表" :data="queryParams.formDetailRespItems">
          <el-table-column label="序号" align="center" type="index" width="55">
            <template #default="scope">
              {{ scope.$index + 1 }}
            </template>
          </el-table-column>
          <el-table-column prop="name" label="品名" width="200">
          </el-table-column>
          <el-table-column prop="spec" label="规格">
          </el-table-column>
          <el-table-column prop="spec" label="型号">
          </el-table-column>
          <el-table-column prop="count" label="数量">
          </el-table-column>
          <el-table-column prop="remark" label="备注">
          </el-table-column>
        </el-table>
      </div>
      <el-row :gutter="10">
        <el-col :span="12">
          <el-form-item label="审核部门">
            <el-input v-model="queryParams.departmentCheck" placeholder="" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="审核领导">
            <el-input v-model="queryParams.merchantCheck" placeholder="" />
          </el-form-item>
        </el-col>
      </el-row>

    </el-form>
  </div>
</template>

<script setup>
const props = defineProps({
  queryParams: {
    type: Object,
    default: () => {
      return {
        caseNumber: '',
        patientName: '',
        phone: '',
        sex: '',
        age: '',
        height: '',
        weight: '',
        marriage: ''
      }
    },
  },
  title: {
    type: String,
    default: '申购单'
  }
})


const queryParams = ref(props.queryParams)

</script>
<style lang='scss' scoped>
@import url(./index.scss);
</style>